@import url(./base.less);
@vw:3.75vw;
@color:#fb7299;

//头部区域
.header{
  position: fixed;
  left: 0;
  top: 0;
  width:100% ;
  height:(84/@vw) ;
  background-color: #fff;
  z-index: 999;
  
  .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height:(44/@vw) ;
    padding-left:(18/@vw) ;
    padding-right: (12/@vw);
    // background-color: orange;
    .left{
      i{
        font-size: (29/@vw);
        color:@color;
      }
    }
    .right{
      display: flex;
      .ic_search_tab{
        font-size:(22/@vw) ;
        color:#ccc;
      }
      .login{
        overflow: hidden;
        width: (24/@vw);
        height: (24/@vw);
        background-color: skyblue;
        margin-left:(20/@vw) ;
        border-radius: 50%;
      }
      .download{
        width:(72/@vw) ;
        height: (24/@vw);
        margin-left: (20/@vw);

      }
    }

  }
  .bottom{
    display: flex;
    position: relative;
    height:(40/@vw) ;
    border-bottom: 1px solid #eee;
    .tabs{
      overflow: hidden;
      flex: 1;
      .tabs-list{
        display: flex;
        
        a{
          font-size:(14/@vw) ;
          padding:0 (16/@vw);
          line-height: (40/@vw);
          white-space: nowrap;
          &.active{
            color: @color;
          }
        }
        .line{
          position: absolute;
          left: 0;
          bottom: 0;
          width:(28/@vw) ;
          height:(2/@vw) ;
          background-color: @color;
          transform: translateX((16/@vw));
          border-radius: 1px;
        }
      }
    }
    .after{
      margin-top:(8/@vw) ;
      width:(40/@vw) ;
      height: (23/@vw);
      line-height: (23/@vw);
      text-align: center;

    }


  }

}

//主体区域
.main{
  
  padding-top: (84/@vw);
  .main-list{
    display: flex;
    flex-wrap: wrap;
    a{
      width: 50%;
      padding: (8/@vw) (8/@vw);
      // background-color: skyblue;
      font-size: (12/@vw);
    }
    .pic{
      position: relative;
      width:(173/@vw) ;
      height: (98/@vw);
      background-color: green;
      .count{
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        color: #fff;
        padding:(5/@vw) (6/@vw) ;
        // background-image: linear-gradient(to top,rgba(0,0,0.85),transprent);
        background: linear-gradient(0deg,rgba(0,0,0,.85),transparent);
        i{
          vertical-align: middle;
        }

      }
    }
    .txt{
       width:(173/@vw) ;
      margin-top: (6/@vw);
      color: #232323;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

    }
  }
  .line{
   

    position: fixed;
    left:(10/@vw) ;
    bottom:(20/@vw) ;
    width:(351/@vw) ;
    height: (38/@vw);
    border-radius: 6.66667vw;
    box-shadow: 0 0.53333vw 2.66667vw rgb(0 0 0 / 20%);
    background-color: @color;
    line-height: (38/@vw);
    a{
       display: flex;
    justify-content: space-between;
      width: 100%;
      padding: 0 (50/@vw);

   
    i{
       color: #fff;
      width: (35/@vw);
      height: (16/@vw);

    }
    p{
       color: #fff;
      font-size: 14px;

    }
     }
  }
}